<template>
  <!-- 返回顶部 -->
  <view class="to-top" v-show="showToTop" @click="toTopFn">
    <ve-icon name="to-top" size="48"></ve-icon>
  </view>
</template>

<script setup>
  import { onPageScroll } from '@dcloudio/uni-app'
  import { ref, watch } from 'vue'

  const props = defineProps({
    scrollTop: Number,
  })

  let winHeight = uni.getSystemInfoSync().windowHeight || 0
  const showToTop = ref(false)

  // 监听滚动事件
  watch(
    () => props.scrollTop,
    (scrollTop) => {
      if (winHeight && scrollTop > winHeight) {
        showToTop.value = true
      } else {
        showToTop.value = false
      }
    },
  )

  // 回到顶部
  const toTopFn = () => {
    uni.pageScrollTo({
      scrollTop: 0,
      duration: 300,
    })
  }
</script>

<style lang="less" scoped>
  .to-top {
    position: fixed;
    bottom: 204rpx;
    right: 55rpx;
    // #ifdef H5
    bottom: calc(var(--tab-bar-height) + 204rpx);
    // #endif
    width: 80rpx;
    height: 80rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(138, 138, 138, 0.302);
    border-radius: 4rpx 4rpx 4rpx 4rpx;
  }
</style>
